<template>
  <div class="tlAdd">
    <div>
      <h1 style="font-size: 30px; padding: 20px">新增入库单</h1>
      <div style="float: left; width: 40%; padding: 20px">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="form"
          :rules="rules"
        >
          <el-form-item prop="returnDate" label="退料日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.returnDate"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="制单人ID" prop="ID">
            <el-input v-model="ID" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div style="float: right; width: 40%; padding: 20px">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="form"
          :rules="rules"
        >
          <el-form-item label="退料单号" prop="returnNo">
            <el-input
              v-model="form.returnNo"
              disabled
              placeholder="自动获取"
              style="float: left; width: 70%"
            ></el-input>
            <el-button type="success" style="margin-left: 20px" @click="getId"
              >获取单号</el-button
            >
          </el-form-item>
          <el-form-item label="退料部门" prop="personalDeptId">
            <el-select
              v-model="form.personalDeptId"
              placeholder="退料部门"
              style="width: 100%; padding-right: 20px"
            >
              <el-option
                :key="v.pdeptId"
                v-for="v in select4"
                :label="v.pdept"
                :value="v.pdeptId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="clear: both"></div>
    <div>
      <h1 style="font-size: 30px; padding: 20px">器材列表</h1>

      <el-form :inline="true" ref="form" :model="form" label-width="80px" :rules="rules">
        <!-- 下拉一 -->
        <el-form-item label="器材名称" prop="facilityName">
          <el-select
            v-model="form.facilityName"
            placeholder="器材名称"
            style="width: 350px; padding-right: 20px"
            @change="select2"
          >
            <el-option
              :key="v"
              v-for="v in select1"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="器材型号" prop="facilityModel">
          <el-select
            v-model="form.facilityModel"
            placeholder="器材型号"
            style="width: 350px; padding-right: 20px"
            @change="select3"
          >
            <el-option
              :key="v"
              v-for="v in Select2"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次号" prop="batchnum">
          <el-select
            v-model="form.batchnum"
            placeholder="批次号"
            style="width: 350px; padding-right: 20px"
            @change="changeNu"
          >
            <el-option
              :key="v"
              v-for="v in Select3"
              :label="v"
              :value="v"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库数量" prop="num">
          <el-input
            v-model="form.num"
            style="width: 350px; padding-right: 20px"
          ></el-input>
        </el-form-item>
        <el-form-item label="入库单价" prop="price">
          <el-input
            v-model="form.price"
            style="width: 350px; padding-right: 20px"
          ></el-input>
        </el-form-item>
        <span style="margin-left: 30px"
          >金额：<strong style="font-weight: bold; color: red; font-size: 30px"
            >￥{{ form.money }}</strong
          ></span
        >
        <el-button
          style="float: right; margin-right: 300px"
          type="success"
          @click="topush"
          >加入明细</el-button
        >
      </el-form>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="returnNo" label="退料单号"> </el-table-column>
        
        <el-table-column prop="wfacilityManagementId" label="器材编号"> </el-table-column>
        <el-table-column prop="facilityName" label="器材名称"> </el-table-column>
        <el-table-column prop="facilityModel" label="规格型号"> </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column prop="num" label="数量"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="money" label="金额"> </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 10px">
        <el-button style="margin-right: 20px; width: 100px" @click="cancel"
          >取消</el-button
        >
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      labelPosition: "left",
      form: {
        //制单人ID
        preparedById: "",
        //退料部门ID
        personalDeptId: "",
        //退料日期
        returnDate: "",
        //器材型号
        facilityModel: "",
        //器材名称
        facilityName: "",
        num: 0,
        price: 0,
        //批次号
        batchnum: "",
        //退料单号
        returnNo: "",
        //总价
        money:''
      },
      rules: {
        preparedById:[{required: true, trigger: "blur"}],
        returnDate: [{ required: true, trigger: "blur" }],
        personalDeptId:[{required: true, trigger: "blur" }],
        facilityModel:[{required: true, trigger: "blur"}],
        facilityName:[{required: true, trigger: "blur"}],
        num:[{required: true, trigger: "blur"}],
        price:[{required: true, trigger: "blur"}],
        batchnum:[{required: true, trigger: "blur"}],
        returnNo:[{required: true, trigger: "blur"}],
        money:[{required: true, trigger: "blur"}],
        returnDate:[{required: true, trigger: "blur"}],
        ID:[{required: true, trigger: "blur"}],
      },
      select1: [],
      Select2: [],
      Select3: [],
      select4: [],
      //器材编号
      wfacilityManagementId: "",
      ID: "",
      //单位
      unit: "",
      tableData: [
      ],
    };
  },
  methods: {
    cancel: function () {
      this.$router.push("/home/Bmtl");
    },
    //添加保存
    save: function () {
      this.$axios({
        url: "/WReturnManagement/add",
        method: "post",
        data: {
          //退料部门ID
          personalDeptId: this.form.personalDeptId,
          //制单人ID
          preparedById: this.ID,
          //退料日期
          returnDate: this.form.returnDate,
          //退料单号
          returnNo: this.form.returnNo,
          wreturnDetailsAddDtos: [
            {
              //数量
              quantity: this.form.num,
              //批次号
              receiptNo: this.form.batchnum,
              //退料单号
              returnNo: this.form.returnNo,
              //单价
              unitPrice: this.form.price,
              //器材编号
              wfacilityManagementId: this.wfacilityManagementId,
            },
          ],
        },
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("添加成功！");
          setTimeout(() => {
            this.$router.push("/home/Bmtl");
          }, 1000);
        } else {
          this.$message.error("添加失败！请重新添加！");
        }
      });
    },
    //渲染下拉框
    getSelect1: function () {
      this.$axios({
        url: "/wFacilityManagement/listName",
      }).then(({ data }) => {
        // console.log(data.data);
        this.select1 = data.data;
      });
    },
    select2: function () {
      this.form.facilityModel = "";
      this.form.batchnum = "";
      this.$axios({
        url: "/wFacilityManagement/listMOdel",
        params: {
          facilityName: this.form.facilityName,
        },
      }).then(({ data }) => {
        // console.log(data);
        this.Select2 = data.data;
      });
    },
    select3: function () {
      this.form.batchnum = "";
      this.$axios({
        url: "/wFacilityManagement/listNumber",
        params: {
          facilityModel: this.form.facilityModel,
          facilityName: this.form.facilityName,
        },
      }).then(({ data }) => {
        console.log(data);
        this.wfacilityManagementId = data.data;
        this.form.wfacilityManagementId = data.data;
        this.$axios({
          url: "/WAccountDetails/list",
          params: {
            wfacilityManagementId: this.wfacilityManagementId,
          },
        }).then(({ data }) => {
          this.Select3 = data.data;
          console.log(this.Select3, this.wfacilityManagementId);
        });
      });
    },
    Select4: function () {
      this.$axios({
        url: "/personal/pdept",
      }).then(({ data }) => {
        // console.log(data);
        this.select4 = data.data;
      });
    },
    //生成表单数据
    changeNu: function () {
      this.$axios({
        url: "/WAccountDetails/list",
        method: "post",
        data: {
          receiptNo: this.form.batchnum,
          wfacilityManagementId: this.wfacilityManagementId,
        },
      }).then(({ data }) => {
        this.unit = data.data.wfacilityManagement.facilityUnit.unit;
        // console.log();
      });
    },
    //生成退料单号
    getId: function () {
      this.$axios({
        url: "/WReturnManagement/addNo",
      }).then(({ data }) => {
        this.form.returnNo = data.data;
      });
    },
    //topush
    topush: function () {
      let data = {
        returnNo:this.form.returnNo,
        //器材编号
        wfacilityManagementId: this.wfacilityManagementId,
        //器材名称
        facilityName: this.form.facilityName,
        //单位
        unit: this.unit,
        //数量
        num:this.form.num,
        // 单价
        price:this.form.price,
        //总金额
        money:this.form.money,
        //规格型号
        facilityModel:this.form.facilityModel
      };
      this.tableData.push(data)
    },
  },
  mounted: function () {
    this.getSelect1();
    this.Select4();
    this.ID = JSON.parse(sessionStorage.getItem("user"))[0].id;
  },
    watch:{
   'form.num'(){
     this.form.money=this.form.num*this.form.price
    },
    'form.price'(){
     this.form.money=this.form.num*this.form.price
    },
    immediate:true
  }
};
</script>
<style lang="less" scoped>
.tlAdd {
  padding: 20px;
}
.del_btn {
  font-size: 14px;
  color: #ffc5c5;
  background: #fef3f3;
  border-color: #fef3f3;
}
</style>